<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			.BianKuang {
				/* 1、盒子边框 */
				width: 300px;
				height: 200px;
				/* 边框粗细 */
				border-width: 5px;
				/* 边框样式  solid 实线边框 dashed虚线边框 dotted点线边框 transparent透明边框 */
				/* border-style: solid; */
				/* border-style: dashed; */
				border-style: dotted;
				/* 边框颜色 */
				border-color: #ff0000;
				/* 边框分开写 */
				border-top: 10px #00FFFF dotted;
			}

			/* 表格边框合并 */
			/* border-collapse: collapse; */

			.NeiBianJu {
				/* 2、盒子内边距 */
				padding-left: 20px;
				padding-right: 20px;
				padding-top: 50px;
				padding-bottom: 20px;
				/* 复合写法 */
				/* padding: 5px; 上下左右都是5px */
				/* padding: 5px 10px; 上下5px,右左10px */
				/* padding: 5px 10px 20px; 上为5px,右左10px,下20px */
				/* padding: 5px 10px 20px 30px; 上 右 下 左 */
			}

			/* 内边距会影响盒子大小 */
			.box1 {
				/* 做出一个200*200的盒子 */
				width: 160px;
				height: 160px;
				background-color: #00FFFF;
				padding: 20px;
			}

			/* padding不会影响盒子大小的情况 */
			h1 {
				/* 不指定宽度或高度 */
				height: 200px;
				background-color: #ffaa00;
				padding: 30px;
			}

			.box2 {
				width: 200px;
				height: 200px;
				background-color: #550000
			}

			.box2 p {
				padding-top: 100px;
				background-color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<div class="BianKuang NeiBianJu"> 还不够大会非公开骄傲和背景卡迪换
			个背景卡电波女空间大半年就肯定不能放几块
		</div>
		<hr>
		内边距影响盒子大小
		<div class="box1"></div>
		<hr>
		<h1></h1>
		<div class="box2">
			<p></p>
		</div>
	</body>
</html>
